<template>
  <div class="recommend clearfix">
    <div class="vocation clearfix">
      <div class="title">
        <ul>
          <li>
            <a class="vocation-months" href="javascript:;">当季热门度假</a>
          </li>
          <li>
            <a class="vocation-today" href="javascript:;">今日特惠度假</a>
          </li>
        </ul>
      </div>
      <div class="vocation-body clearfix">
        <div class="vocation-recom" v-for="item in recommendList" :key="item.id">
          <a href="javascript:;">
            <div class="recom-top">
              <img :src="item.imgSrc" alt />
              <div class="img-title">
                <p class="place">{{ item.place }}</p>
                <p class="time">{{ item.time }}</p>
              </div>
            </div>
            <div class="recom-bottom">
              <p class="detail">{{ item.detail }}</p>
              <p class="price">
                <em>¥</em>
                <em>{{ item.price }}</em>
              </p>
            </div>
          </a>
        </div>
      </div>
      <div class="more">
        <a href="javascript:;">
          更多特惠度假
          <span class="iconfont">&#xe687;</span>
        </a>
      </div>
    </div>

    <div class="vocation">
      <div class="title">
        <ul>
          <li>
            <a class="vocation-months" href="javascript:;">当季景点门票</a>
          </li>
          <li>
            <a class="vocation-today" href="javascript:;">特惠门票</a>
          </li>
        </ul>
      </div>
      <div class="vocation-body clearfix">
        <div class="vocation-recom" v-for="item in ticketList" :key="item.id">
          <a href="javascript:;">
            <div class="recom-top">
              <img :src="item.imgSrc" alt />
            </div>
            <div class="recom-bottom">
              <p class="place-title">{{ item.title }}</p>
              <p class="place-detail">{{ item.detail }}</p>
              <p class="price">
                <em>¥</em>
                <em>{{ item.price }}</em>
              </p>
            </div>
          </a>
        </div>
      </div>
      <div class="more">
        <a href="javascript:;">
          更多特惠门票
          <span class="iconfont">&#xe687;</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendList: [
        {
          id: '0001',
          imgSrc: '//imgs.qunarzz.com/p/p70/1809/e7/4941057a6aae702.jpg_256x160_9fee6ccb.jpg',
          detail: '含往返飞机票(含税)+4晚住宿',
          price: '2310',
          place: '抚州-丽江',
          time: '5天自由行'
        },
        {
          id: '0002',
          imgSrc: '//imgs.qunarzz.com/p/p48/201302/28/bc44faa497db0dcf93835fbb.jpg_256x160_0ba13461.jpg',
          detail: '含往返飞机票(含税)+5晚住宿',
          price: '6660',
          place: '抚州-泰国',
          time: '6天跟团游'
        },
        {
          id: '0003',
          imgSrc: '//imgs.qunarzz.com/p/p66/201304/17/384810d022dd28f793835fbb.jpg_256x160_6a7ec251.jpg',
          detail: '含往返飞机票(含税)+5晚住宿',
          price: '3923',
          place: '抚州-三亚',
          time: '6天跟团游'
        },
        {
          id: '0004',
          imgSrc: '//imgs.qunarzz.com/p/p45/1809/22/d815539e74dc4a02.jpg_256x160_00a6f984.jpg',
          detail: '含往返火车票+3晚住宿',
          price: '1250',
          place: '抚州-厦门',
          time: '4天跟团游'
        }
      ],
      ticketList: [
        {
          id: '0001',
          imgSrc: '//img1.qunarzz.com/sight/p0/2005/39/3979f1867defec4ea3.water.jpg_256x160_6ae804bb.jpg',
          title: '八达岭长城',
          detail: '一定要看那块“不到长城非好汉”碑',
          price: '40'
        },
        {
          id: '0002',
          imgSrc: '//img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_256x160_f977b5d4.jpg',
          title: '故宫',
          detail: '世界五大宫之首，穿越与您近在咫尺',
          price: '64.9'
        },
        {
          id: '0003',
          imgSrc: '//img1.qunarzz.com/sight/p0/2005/30/307fa37039eab5cba3.water.jpg_256x160_643266e5.jpg',
          title: '颐和园',
          detail: '北方也有江南园林',
          price: '30'
        },
        {
          id: '0004',
          imgSrc: '//img1.qunarzz.com/sight/p0/1505/f5/f5f45e1a83537bcb.water.jpg_256x160_618d3a8e.jpg',
          title: '圆明园',
          detail: '追忆昔日万园之园',
          price: '10'
        }
      ]
    }
  },
  created() {},
  methods: {}
}
</script>

<style lang="stylus" scoped>
.recommend {
  height: auto;
}

.vocation {
  height: auto;
  padding: 0 0.133333rem;
  margin-top 0.2rem
}

.title {
  height: 0.48rem;
}

.title ul li {
  float: left;
}

.vocation-months, .vocation-today {
  display: inline-block;
  font-size: 0.12rem;
  color: #666;
  height: 0.426667rem;
  line-height: 0.426667rem;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
  padding: 0 0.173333rem;
  margin-right: 0.133333rem;
}

.vocation-recom {
  float: left;
  width: 47.7%;
}

.vocation-recom:nth-child(even) {
  margin-left: 0.133333rem;
}
.recom-top{
    overflow hidden
    height 0
    padding-bottom 71%
    position relative
}
.recom-top img {
  width: 100%;
  margin-top: 0.106667rem;
  border-radius: 0.066667rem;
}
.img-title{
position absolute
bottom 0.106667rem
left 50%
transform translate(-0.706667rem)
width 1.413333rem
height 0.733333rem
background #00000099
text-align center
}
.place-title{
    color #000
    font-size 0.2rem
}
.place{
    height 0.266667rem
    line-height 0.266667rem
    color #fff
    font-size 0.2rem
    margin 0.08rem 0
}
.place-detail{
     font-size: 0.186667rem;
  color: #555;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin : 0.066667rem 0;
}
.time{
    color #ffde00
    font-size 0.16rem
}
.recom-bottom {
  padding: 0.066667rem;
}

.detail {
  font-size: 0.2rem;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 0.066667rem;
}



.price em {
      margin-right: 0.066667rem;
  color: #ff7400;
  font: bold 20px arial, sans-serif;
}

.more {
  height: 0.586667rem;
  line-height: 0.586667rem;
  margin 0.226667rem 0.066667rem
}

.more a {
  display: block;
  width: 100%;
  font-size: 0.186667rem;
  color: #00d0d4;
  text-align: center;
  border-radius: 4px;
  border: 0.5px solid #00d0d4;
  margin: 0.16rem auto;
}

.iconfont {
  font-size: 0.16rem;
}

.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: '.';
  height: 0;
}

.clearfix {
  *zoom: 1;
}
</style>
